<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner"><img v-for="item in banner" :src="item" alt="" /></div>
			<div class="content">		
				<div class="superiority">
					<div class="content">
						<div v-for="item in superiority_con">
							<img :src="item.src" alt="" />
							<p class="title">{{ item.title }}</p>
							<p>{{ item.content }}</p>
							<a href="javascript:;">{{ item.btn }}</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
	
import picture_09 from '../../assets/picture_9.jpg'
import banner from '../../assets/banner_2.jpg'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer
  },
  data () {
    return {
    	banner : [banner],
    	superiority_con : [
    		{
    			src : picture_09,
    			title : '奇思妙想创造出优秀网页',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术拥有大气舒适的界面和众多精美模板，用本公司制作一个高逼格',
    			btn : '了解详情'
    		},
    		{
    			src : picture_09,
    			title : '网页制作规模发展迅猛',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术拥有大气舒适的界面和众多精美模板，用本公司制作一个高逼格',
    			btn : '了解详情'
    		},
    		{
    			src : picture_09,
    			title : '网页设计培训机构怎么选?',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术拥有大气舒适的界面和众多精美模板，用本公司制作一个高逼格',
    			btn : '了解详情'
    		},
    	],
    }
  },
  methods : {
  	
  }
}

</script>

<style type="text/css" scoped>
	/* news.style */
	
	.superiority .content div{
		border-bottom: 0.01rem solid #ececec; margin-bottom: 0.6rem;
	}
	.superiority .content div:nth-of-type(3){
		margin-bottom: 0.2rem;
	}
	.superiority a{
		display: block; width: 1.5rem; background: #46c5fc; color: #fff; text-align: center; height: 0.4rem; border-radius:0.1rem; margin: 0.3rem 0; line-height: 0.4rem; font-size: 0.12rem;
	}
</style>